<template>
    <div :class="{'ly-is-full':isFull}">
        <div class="tableSelect" ref="tableSelect">
            
        </div>
        <div class="table">
            <div  class="space-inner">
                <div class="lycard">
                    <div class="space-header">
                        <div class="lycard-left space-header-title">报价审核</div>
                        <div class="lycard-right">
                            <div @click="setFull">
                                <el-tooltip content="全屏" placement="bottom">
                                    <el-icon ><full-screen /></el-icon>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                    <div class="space-main">
                        <div class="allbgc">
      <div class="contentwid">
        <!-- // 需要拖动的dom -->
        <div ref="dom" @wheel="wheel">
          <div class="svgdiv">
            <svg id="vehicleMonitorId" ref="mysvg" data-name="vehicleMonitorName" xmlns="http://www.w3.org/2000/svg" :viewBox="viewboxw">
              <!-- <title>二楼上层</title> -->
              <g>
                <ellipse class="st0" cx="39.2" cy="106" rx="28.5" ry="32" />
                <g>
                  <g>
                    <g>
                      <g>
                        <g>
                          <text transform="matrix(1.2 0 0 1 18.1001 119.2002)" class="st1 st2 st3">
                            1#
                          </text>
                        </g>
                      </g>
                    </g>
                  </g>
                </g>
              </g>
           </svg>
            <clipPath id="clippath">
              <rect class="cls-3" x="1729.9" y="837.4" width="45.7" height="35.9" />
            </clipPath>
          </div>
        </div>
      </div>
      
      <div class="sjs">
        {{ sjxs }}
      </div>
    </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    //引入panzoom svg库
    import Panzoom from "panzoom";
    export default {
        name:'priceManager',
        components:{
        },
        data() {
            return {}
        },
        mounted() {
            this.initPanZoom();
        },
        methods:{
            //初始化svg缩放
            initPanZoom() {
            // 存放Panzoom用于后面的其他操作
            this.panzoom = Panzoom(this.$refs.dom, {
                origin: "0 0", // 位置
                maxScale: 2, // 最大比例
                minScale: 0, // 最小比例
                overflow: "auto", // 溢出
                canvas: true, // 是否视为canvas
                // dblZoom: false, // 双击放大禁用
            });
            },
            wheel(event) {

            },  
        }
    }
</script>